import { Navigate, useRoutes } from "react-router-dom";
import NotFound from "../components/404";
import Login from "../components/Login";
import Main from "../components/Main";
import About from "../components/Main/About";
import Home from "../components/Main/Home";


// 为我们所有的路由都写在App中会显得比较杂乱,不好管理,所以我们发明了路由表
// 将所有路由都写在外面一个专门的路由文件中,暴露之后在引入,最后配合useRoutes方法使用
const routes =[
    {
        path:'/login',
        element:<Login/>
    },
    {
        path:'/main',
        element:<Main/>,
        children:[
            {
                path:'/main/home',
                element:<Home/>
            },
            {
                path:'/main/about',
                element:<About/>
            },
        ]
    },
    {
        path:'/login',
        element:<Navigate/>
    },
    {
        path:'/login',
        element:<NotFound/>
    },
]

export default routes

// useRoutes组件方法,他可以用于根据路由表,动态创建Routes和Route
// 可以直接在路由表中,将所有路由全部遍历出结果并暴露,然后
export const GetRoutes=()=>{
    return useRoutes(routes)
}